<style>
    /* 娓呴櫎鍐呭杈硅窛 */
    body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 缁撴瀯鍏冪礌 */
    dl, dt, dd, ul, ol, li, /* list elements 鍒楄〃鍏冪礌 */
    pre, /* text formatting elements 鏂囨湰鏍煎紡鍏冪礌 */
    fieldset, lengend, button, input, textarea, form,/* form elements 琛ㄥ崟鍏冪礌 */
    th, td , header, footer{ /* table elements 琛ㄦ牸鍏冪礌 */
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* 璁剧疆榛樿瀛椾綋 */
    body, button, input, select, textarea { /* for ie */
        color: #495d64;
        font:0.75rem/1.42857143  "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        outline:0;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%
    }



    code, kbd, pre, samp, tt {
        font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    }

    /* 閲嶇疆鍒楄〃鍏冪礌 */
    ul, ol {
        list-style: none;
    }

    h1, h2, h3, h4, h5, h6{
        font-size: 100%;
        font-weight: normal;
    }

    /* 閲嶇疆琛ㄦ牸鍏冪礌 */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    img {
        vertical-align: top;
        border: 0;
    }

    a {
        color: #495d64;
        text-decoration: none;
    }

    a:hover,
    a:focus {
        color: #2a6496;
        text-decoration: none;
        outline: none;
    }

    @media only screen and ( max-width:319px ) {    /*鑰佸紡瀹夊崜鎵嬫満                 */
        html { font-size: 31.9px; }
    }
    @media only screen and ( width:320px ) {        /*iphone4/4s/5/5s绔栧睆         */
        html { font-size: 32px; }
    }
    @media only screen and ( min-width:360px ) {    /*灏忕背銆佷笁鏄焠ote绯诲垪涓撶敤绔栧睆    */
        html { font-size: 36px; }
    }
    @media only screen and ( min-width:375px ) {    /*iphone6                    */
        html { font-size: 37.5px; }
    }
    @media only screen and ( min-width:414px )  {   /*iphone6 plus               */
        html { font-size: 41.4px; }
    }
    @media only screen and ( min-width:481px ) {    /*澶ч儴鍒嗗畨鍗撴墜鏈轰互鍙婂叾浠栨墜鏈�      */
        html { font-size: 48.1px; }
    }
    @media only screen and ( min-width:500px ) {    /*澶ч儴鍒嗗畨鍗撴墜鏈轰互鍙婂叾浠栨墜鏈�      */
        html { font-size: 50px; }
    }
    /* header */



    /* chat */
    .chat-content {

    }

    .chat-content .message-wrapper {
        padding: 0 0.5rem;
    }

    .message-item:nth-child(n+1) {
        margin-top: 0.4rem;
    }

    .message-item:last-child {
        margin-bottom: 0.4rem;
    }
    .message-data{
        font-size: 12px;
        color: #9e9e9e;
        text-align: center;
        margin: 0.3rem 0;
    }
    .message-text {
        display: flex;
        font-size: 0.4rem;
    }

    .my-msg .message-text {
        flex-direction: row-reverse;
    }

    .you-msg .message-text {
        padding-left: 1.39rem;
    }

    .message-text .rong-avatar {
        flex-shrink: 0;
        width: 1.1rem;
        height: 1.1rem;
        overflow: hidden;
    }

    .message-text .rong-avatar img {
        width: 100%;
        height: 100%;
    }

    .message-text .message-body {
        position: relative;
        color: #353535;
        padding: 0.25rem;
        max-width: 80%;
        min-height: 1em;
        display: inline-block;
        vertical-align: top;
        text-align: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    /*.message-text .message-body pre {*/
        /*white-space: normal;*/
    /*}*/

    .my-msg .message-text .message-body {
        margin-right: 0.25rem;
        background: #F6DE42;
    }

    .my-msg .message-text .message-body:after {
        position: absolute;
        top: 0.32rem;
        right: -0.3rem;
        border: 0.2rem solid transparent;
        content: " ";
        border-left-color: #F6DE42;
        border-left-width: 0.15rem;
    }

    .your-msg .message-text .message-body {
        margin-left: 0.25rem;
        background: #fff;
    }

    .your-msg .message-text .message-body:before {
        position: absolute;
        top: 0.32rem;
        left: -0.3rem;
        border: 0.2rem solid transparent;
        content: " ";
        border-right-color: #fff;
        border-right-width: 0.15rem;

    }

    /* footer */
    .footer {

        display: flex;
        height: 1.20625rem;
        line-height: 1.20625rem;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        z-index: 99;
        background-color: #f8f8f8;
    }

    .footer .message-wrap {
        flex: 1;
        overflow: hidden;
        padding: 0.321538rem 0;
    }

    .footer .message-content {
        padding: 0 0.386rem;
        width: 100%;
        background-color: #f8f8f8;
        resize: none;
        line-height: 0.6369rem;
        border: none;
        font-size: 0.375rem;
    }

    .footer .send-btn {
        display: inline-block;
        width: 1.4rem;
        height: 0.7rem;
        font-size: 0.4rem;
        color: #fff;
        border: 1px solid #179e16;
        border-radius: 3px;
        background-color: #1aad19;
        line-height: 0.7rem;
        margin-top: 0.25rem;
        margin-right: 0.4rem;
    }
    pre{
        color: #111111;
    }
    .voice-duration{
        position: absolute;
        right: -0.5rem;
        top: 0.35rem;
        color: #9e9e9e;
    }
    .viewimgurl{
        width: 100%;
        /*position: absolute;*/
        /*top: 50%;*/
        /*left: 50%;*/
        /*margin-left: -50%;*/
        /*margin-top: -50%;*/
        background-size: 90% 90%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    .voicemsg{
        width: 30px;
        height: 30px;
        background: url("img/shopchat2.png") no-repeat center;
        background-size: 30px 30px;
    }
    .my-msg .voicemsg{
        width: 30px;
        height: 30px;
        background: url("img/shopchat3.png") no-repeat center;
        background-size: 30px 30px;
    }
    .my-msg .voice-duration{
        left: -0.5rem;
    }
    .my-msg .message-text .message_body:after{
        border-left-color: #fff;
    }
</style>
<ion-view view-title="{{targetUserInfo.nickname}}">
    <ion-nav-bar class="index_head">
        <ion-nav-back-button style="padding-left: 8px;color: #fff;" class="button button-icon icon ion-android-arrow-back">
            <!--;自定义返回图标-->
            <i  style="display: block;width: 22px;height:22px;margin-top: 4px;"></i>
        </ion-nav-back-button>
        <ion-nav-buttons  side="right" >

                <span ng-if="ismaster == 'false'&& targetUserInfo.userWechatNo" ng-click="showweixin()"  class="IphoneStyle weixinbtn">
                    <img style=" width:20px;height: 20px;" src="img/shophome/shopchat-weixin.png"/>
                </span>
            <a href="tel:{{sphone}}">
                <span class="IphoneStyle" ng-if="ismaster == 'false'">
                    <img style="width: 20px;height: 20px;" src="img/shophome/shopchat-phone.png"/>
                </span>
            </a>
        </ion-nav-buttons>
    </ion-nav-bar>
    <!--发送产品链接-->
    <div class="chat_link_wrap" ng-if="isshownewsbar">
        <div class="chat_link_head">
            <h3 ng-if="shopchat.protype != 01 && shopchat.prosource =='platform'">{{item.productShortName}}</h3>
            <h3 ng-if="shopchat.protype == 01" && shopchat.prosource =='platform'>{{item.detail.jjmc}}</h3>
            <h3 ng-if="shopchat.prosource =='self'">{{item.productName}}</h3>
            <span class="fr">
                <!--<img src="img/status_mujizhong.png" alt="">-->
                <img ng-if="item.saleStatus == 02" src="img/status_yuren.png">
                <img ng-if="item.saleStatus == 03" src="img/status_mujizhong.png">
                <img ng-if="item.saleStatus == 04" src="img/status_muman.png">
                <img ng-if="item.saleStatus == 05" src="img/status_jieshu.png">
            </span>
        </div>
        <div class="chat_link_content row">
            <div class="col col-33">
                <span style="color: #FE4A0A;font-size: 12px; text-align: center;display: block" ng-if="shopchat.prosource =='platform'">
                    <span style="font-size: 20px;" ng-if="shopchat.protype !=01 ">{{item.profitHight.expectAnnualRevenue  | newProfitRender}}</span><span style="font-size: 14px;">{{item.profitHight.expectAnnualRevenue  | newProfitFudongRender}}</span>
                    <span style="font-size: 20px;" ng-if="shopchat.protype ==01 ">{{item.detail.lsjzJson[0].zdf || '&#45;&#45;'}}</span>
                </span>
                <span style="color: #FE4A0A;font-size: 12px; text-align: center;display: block" ng-if="shopchat.prosource =='self'">
                    <span style="font-size: 20px;">{{item.maxRevenue}}</span>
                </span>
                <p ng-if="shopchat.protype !=01 && shopchat.protype !=06 ">预期收益</p>
                <p ng-if="shopchat.protype ==06 ">基准收益</p>
                <p ng-if="shopchat.protype ==01 ">涨跌幅</p>
            </div>
            <div class="col col-33" ng-if="shopchat.protype !=01 ">
                <span ng-if="shopchat.prosource =='self'" style="color: #333;font-size: 12px; text-align: center;display: block">
                     <span style="font-size: 20px;">{{item.dueTime}}</span>
                </span>
                 <span  ng-if="shopchat.prosource =='platform'" style="color: #333;font-size: 12px; text-align: center;display: block">
                     <span style="font-size: 20px;">{{item.dueTime}}</span>月
                </span>
                <p>产品期限</p>
            </div>
            <div class="col col-33" ng-if="shopchat.protype ==01 ">
                <span style="color: #333;font-size: 12px; text-align: center;display: block">
                     <span style="font-size: 20px;">{{item.detail.lsjzJson[0].jzdw || '&#45;&#45;'}}</span>
                </span>
                <p>最新净值</p>
            </div>
            <div class="col col-33" ng-if="shopchat.prosource =='platform'">
                 <span style="color: #333;font-size: 12px; text-align: center;display: block;line-height: 26px;" ng-if="shopchat.protype!='01'&& shopchat.protype!='06'">
                   {{shopchat.investType[item.investType]}}
                </span>
                <span style="color: #333;font-size: 12px; text-align: center;display: block;line-height: 26px;" ng-if="shopchat.protype=='06'">
                   {{item.peOrganizeShape|zuzhixingshi}}
                </span>
                <span style="color: #333;font-size: 12px; text-align: center;display: block;line-height: 26px;" ng-if="shopchat.protype=='01'">
                   {{item.detail.jjjlmc}}
                </span>
                <p ng-if="shopchat.protype!='01' && shopchat.protype!='06'">投资领域</p>
                <p ng-if="shopchat.protype=='06'">组织形式</p>
                <p ng-if="shopchat.protype=='01'">基金经理</p>
            </div>
            <div class="col col-33" ng-if="shopchat.prosource =='self'">
                <span style="color: #333;font-size: 12px; text-align: center;display: block">
                   {{item.productType}}
                </span>
                <p>产品分类</p>
            </div>
        </div>
        <div class="chat_link_btn" >
            <button ng-if="shopchat.protype != 01 && shopchat.prosource =='platform'" ng-click="sendProInfo(item.productShortName)">发送产品</button>
            <button ng-if="shopchat.protype == 01 && shopchat.prosource =='platform'" ng-click="sendProInfo(item.detail.jjmc)">发送产品</button>
            <button ng-if="shopchat.prosource =='self'" ng-click="sendProInfo(item.productName)">发送产品</button>
        </div>

        <!--<div class="row chat_link_con">-->
            <!--<div class="col col-25 text-center chat_link_prond" style="padding-top: 0px;" ng-if="shopchat.protype != 01">-->
                <!--<div>-->
                    <!--<span style="font-size: 17px">{{item.profitHight.expectAnnualRevenue  | newProfitRender}}</span>-->
                    <!--<span style="font-size: 12px">{{item.profitHight.expectAnnualRevenue  | newProfitFudongRender}}</span>-->
                <!--</div>-->
                <!--<div ng-if="shopchat.protype !=06 ">预期收益</div>-->
                <!--<div ng-if="shopchat.protype ==06 ">基准收益</div>-->
            <!--</div>-->
            <!--<div class="col col-25 text-center chat_link_prond" style="padding-top: 0px" ng-if="shopchat.protype == 01">-->
                <!--<div style="font-size: 20px;color:#f15355">{{item.detail.lsjzJson[0].zdf || '&#45;&#45;'}}</div>-->
                <!--<div>涨跌幅</div>-->
            <!--</div>-->
            <!--<div class="col col-75 chat_link_prond2">-->
                <!--<div ng-if="shopchat.protype != 01">{{item.productShortName}}</div>-->
                <!--<div ng-if="shopchat.protype == 01">{{item.detail.jjmc}}</div>-->
                <!--<div class="row row-no-padding shophome-product-btn" >-->
                    <!--<div ng-if="item.saleStatus && shopchat.protype != 01">{{item.saleStatus | getStatus}}</div>-->
                    <!--<div ng-if="shopchat.protype == 01">{{item.detail.jjzt}}</div>-->
                    <!--<div>{{shopchat.protype|getTypeName}}</div>-->
                    <!--<div ng-if="p.productTag">{{p.productTag}}</div>-->
                <!--</div>-->
                <!--<div class="row row-no-padding" ng-if="shopchat.protype != 01">-->
                    <!--<div style="margin-right: 10px;"><span>起投金额：</span>{{item.minimumAmount | abbrMoney}}</div>-->
                    <!--&lt;!&ndash;<div ng-if="p.proSource =='self'"><span>产品期限：</span> 12个月</div>&ndash;&gt;-->
                    <!--<div ng-if="shopchat.prosource =='self'"><span>产品期限：</span> {{item.dueTimeDes}}</div>-->
                    <!--<div ng-if="shopchat.prosource =='platform'"><span>产品期限：</span> {{item.dueTime}}个月</div>-->
                <!--</div>-->
                <!--<div class="row row-no-padding" ng-if="shopchat.protype == 01">-->
                    <!--<div style="margin-right: 10px"><span>最新净值：</span>{{item.detail.lsjzJson[0].jzdw || '&#45;&#45;'}}</div>-->
                    <!--<div><span>基金经理：</span> {{item.detail.jjjlmc}}</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="chat_link_btn">-->
                <!--<button ng-if="shopchat.protype != 01" ng-click="sendProInfo(item.productShortName)">发送产品</button>-->
                <!--<button ng-if="shopchat.protype == 01" ng-click="sendProInfo(item.detail.jjmc)">发送产品</button>-->
        <!--</div>-->
    </div>

    <ion-content class="has-footer shopchat" ng-class="{true:'chat_link_top', false:''}[isshownewsbar]" delegate-handle="mainScroll">
        <ion-refresher
                pulling-text="下拉加载"
                pulling-icon = 'icon-sfa'
                on-refresh="getHistoryMessagesMore(hasmsg)" ng-if="hasmsg">
        </ion-refresher>

        <div class="message-data" ng-if="!hasmsg" >没有更多消息了</div>
        <div class="chat">
            <!--header-->
            <!--<header class="header">-->
                <!--<h2 class="title">{{stat.currentUserInfo.nickname}}</h2>-->
            <!--</header>-->
            <!--header-->

            <!--chat-content-->
            <div class="chat-content">
                <div class="message-wrapper">
                    <!--{{messageList[$index+1]}}-->
                    <div class="message-item" ng-repeat="msg in messageList"
                         ng-class="[msg.messageDirection == 1 ? 'my-msg' : 'your-msg']">
                        <div class="message-data" ng-if="$index==0">
                            <div class="message-data" ng-if="((localtime-messageList[$index].sentTime)/(60*1000*60*24))>1">{{messageList[$index].sentTime | date:"yyyy-MM-dd HH:mm"}}</div>
                            <div class="message-data" ng-if="((localtime-messageList[$index].sentTime)/(60*1000*60*24))<1">{{messageList[$index].sentTime | date:"HH:mm"}}</div>
                        </div>
                        <div class="message-data" ng-if="$index>0">
                            <div  ng-if="((messageList[$index].sentTime-messageList[$index-1].sentTime)/(60*1000*5))>1">
                                <div class="message-data" ng-if="((localtime-messageList[$index].sentTime)/(60*1000*60*24))>1">{{messageList[$index].sentTime | date:"yyyy-MM-dd HH:mm"}}</div>
                                <div class="message-data" ng-if="((localtime-messageList[$index].sentTime)/(60*1000*60*24))<1">{{messageList[$index].sentTime | date:"HH:mm"}}</div>
                            </div>
                        </div>
                        <!--ng-if="msg.messageType == 'TextMessage'"-->
                        <div  class="message-text">
                            <div class="rong-avatar">

                                <img ng-if="msg.messageDirection == 2" ng-src="{{targetUserInfo.portraitUri}}"
                                     class="rong-avatar-bd">
                                <img ng-if="msg.messageDirection == 1"  ng-src="{{oneselfUserImg}}" class="rong-avatar-bd">
                            </div>
                            <div class="message-body message_body" style="background: #fff;min-width: 80%;"  ng-if="msg.content.messageName == 'RichContentMessage'">
                                <div class="user-msg user_pro">
                                    <div class="user_pro_left" style="background: #fff">
                                        <h3>{{msg.content.title}}</h3>
                                        <p ng-bind-html="msg.content.content|contentwrap"></p>
                                    </div>
                                    <!--<div class="user_pro_img">-->
                                    <!--<img src="{{msg.content.imageUri}}" alt="">-->
                                    <!--</div>-->
                                </div>
                            </div>
                            <div class="message-body" ng-if="msg.content.messageName != 'RichContentMessage'">
                                <pre class="user-msg" ng-if="msg.content.messageName == 'TextMessage'" >{{msg.content.content}}</pre>
                                <div class="user-msg " ng-if="msg.content.messageName == 'VoiceMessage'" ng-click="playVoice(msg.content.content,msg.content.duration)">
                                    <div class="voicemsg"></div>
                                    <div class="voice-duration">{{msg.content.duration}}"</div>
                                </div>

                                <img width="100%" ng-click="ckShowImg(msg.content.imageUri)"  ng-if="msg.content.messageName == 'ImageMessage'" class="image-message"
                                     ng-src="data:image/png;base64,{{msg.content.content}}" alt="image">

                                <!--产品链接展示-->





                                <!--<div class="user-msg user_pro" ng-if="msg.content.messageName == 'RichContentMessage'">-->
                                    <!--<div class="user_pro_left">-->
                                        <!--<h3>{{msg.content.title}}</h3>-->
                                        <!--<p ng-bind-html="msg.content.content|contentwrap"></p>-->
                                        <!--&lt;!&ndash;<p>&ndash;&gt;-->
                                            <!--&lt;!&ndash;预期收益：<span>7.7%</span>&ndash;&gt;-->
                                        <!--&lt;!&ndash;</p>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<p>&ndash;&gt;-->
                                            <!--&lt;!&ndash;起投金额：100万&ndash;&gt;-->
                                        <!--&lt;!&ndash;</p>&ndash;&gt;-->
                                        <!--&lt;!&ndash;<p>&ndash;&gt;-->
                                            <!--&lt;!&ndash;产品期限：24个月&ndash;&gt;-->
                                        <!--&lt;!&ndash;</p>&ndash;&gt;-->
                                    <!--</div>-->
                                    <!--<div class="user_pro_img">-->
                                        <!--<img src="{{msg.content.imageUri}}" alt="">-->
                                    <!--</div>-->
                                <!--</div>-->

                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </ion-content>
    <footer class="footer" id="footer">
        <div class="message-wrap"><textarea ng-model="sendMsgVal" id="message-content" placeholder="请输入文字..."
                                            class="message-content" ng-blur="inputBlur()" ng-focus="inputfocus()"></textarea></div>
        <span class="send-btn" ng-click="sendMsg()">发送</span>
    </footer>
    <div style="position:absolute;width:100%;height: 100%;z-index: 999;background-color: #000;" ng-init="showviewimg = false" ng-click="ckHideImg()"  ng-show="showviewimg">
        <div class="viewimgurl" style="background-image:url({{viewimgurl}}) ">
            <!--<img class="viewimgurl col col-center"  style="vertical-align: middle"  ng-src="{{viewimgurl}}"/>-->
        </div>
    </div>
    <!--<div style="position:absolute;width:100%;height: 100%;z-index: 999;background-color: #000;" ng-init="showviewweixin = false" ng-click="ckHideweixin()"  ng-show="showviewweixin">-->
        <!--<div>私人理财师微信号</div>-->
        <!--<div>水电费</div>-->
        <!--<div>复制</div>-->
    <!--</div>-->
</ion-view>